<template>
  <dv-border-box11 class="box" title="业务统计" :title-width="400" :animate="false" style="width: 100%; height: 200px">
    <dv-charts :option="option" style="width: 100%; height: 200px" />
  </dv-border-box11>
</template>

<script setup>
import { ref } from "vue";

const option = ref({
  color: ["#ffdb5c", "#ff9f7f", "#67e0e3", "#e690d1"],
  xAxis: {
    data: ["社会保险", "卫计委", "住房公积金", "建设规划"],
    axisLabel: {
      style: {
        fill: "#fff",
        fontSize: 16,
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff",
      },
    },
    axisTick: {
      //坐标轴刻度线配置
      style: {
        stroke: "#fff",
      },
    },
  },
  yAxis: {
    data: "value",
    min: 200,
    max: 800,
    axisLabel: {
      style: {
        fill: "#fff",
        fontSize: 16,
      },
    },
  },
  series: [
    {
      data: [623, 431, 709, 304],
      type: "bar",
      barWidth: "40%", //柱宽
      label: {
        //显示柱状图具体数据
        show: true,
        position: "top",
        style: {
          fill: "#fff",
        },
      },
      independentColor: true, //可以配置每一个柱的颜色，默认值与根配置下color属性相同
    },
  ],
});
</script>

<style lang="scss" scoped></style>
